<template>

  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <span class="secondtitle">人才信息检索</span>

        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input v-model="search" placeholder="请输入人才姓名" style="left: 200px;position: relative;width: 200px;">
        </el-input>
        <el-button icon="el-icon-search" type="primary" style="left: 200px;position: relative;">搜索</el-button>
        <br><br>

        <el-row class="ep_info">

          <el-table  :data="Data" style="width: 800px;left: 200px;position: relative;">
            <el-table-column label="员工id" >
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.id)" ></span>
              </template>
            </el-table-column>
            <el-table-column  label="姓名">
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.name)" ></span>
              </template>

            </el-table-column>
            <el-table-column  label="性别">
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.gender)" ></span>
              </template>
            </el-table-column>
            <el-table-column  label="电话">
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.phone_number)" ></span>
              </template>
            </el-table-column>
            <el-table-column  label="邮件">
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.email)" ></span>
              </template>
            </el-table-column>
          </el-table>

        </el-row>

      </div>
    </div>
  </div>
</template>

<script>

import {GetPersonnel} from "../../../../service/past/personelSearch";

export default {
  name: "personnelSearch",
  data(){
    return{
      loading:true,
      tableData:[],
      search:''
    }
  },
  mounted() {
    this.gettableData()
  },
  computed: {
    // 实时监听表格
    Data: function() {
      const search = this.search
      if (search) {
        return this.tableData.filter(dataNews => {
          return Object.keys(dataNews).some(key => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.tableData
    }
  },
  methods: {
    // 筛选变色
    showDate(val) {
      val = val + '';
      if (val.indexOf(this.search) !== -1 && this.search !== '') {
        return val.replace(this.search, '<span style="color: red; ">' + this.search + '</span>')
      } else {
        return val
      }
    },
    gettableData(){
      GetPersonnel().then((res)=>{
        this.tableData=res.data.worker
        this.loading=false
        console.log(this.tableData)
      }).catch(err=>{
        return this.$message.error(err.message)
      })
    },
  }
}
</script>

<style scoped>

</style>
